<!DOCTYPE html>
<html>
	<head>
		<title>document.title example popup</title>
		<meta charset="utf-8"/>
		<style>
			body
			{
				font-family: Verdana, Arial, sans-serif;
				color: #000;
				background-color: #fff;
				font-size: 11px;
			}
		</style>
		<script type="text/javascript">
			(function() {

				var connectionPort;
				
				var userScriptMsgHandler = function(e)
				{
					if (e.data.msg == 'pageOutline')
					{
						var elOutline = document.getElementById('outline');
						elOutline.innerHTML = e.data.outline;
						
						// set link handlers
						var links = elOutline.getElementsByTagName('a');
						for (var i=0; i < links.length; i++) {
							links[i].onclick=function(e) {
								var lnk = e.target;
								while (lnk.nodeName!='A' && lnk) lnk = lnk.parentNode;
					
								e.preventDefault();
								var id = lnk.href.substring(lnk.href.indexOf('#')+1);
								connectionPort.postMessage({msg: "jumpTo", id: id});
							}
						}
					}
				};

				var bgMsgHandler = function(e)
				{
					if (e.data.msg=='establishConnection')
					{
						connectionPort = e.ports[0];
						connectionPort.onmessage = userScriptMsgHandler;
						connectionPort.postMessage({msg:"getOutline"});
					}
				};

				opera.extension.onmessage = bgMsgHandler;
			}());
		</script>
	</head>
	<body>
		<div id="outline">Loading...</div>
	</body>
</html>
